<template>
    <svg :width="barSvgWidth" :height="barSvgHeight">
        <rect v-for="(item,index) in barList" :x="standardX+index*spacing" :y="barSvgHeight - item.barHeight" width="10" :height="item.barHeight" :fill="svgColor" />
    </svg>
</template>

<script>
    export default {
        name: 'BarSvg',
        props: {
            svgColor: {
                type: String,
                default: '#2f889a'
            },
            spacing:{
                type: Number,
                default: 30
            },
            standardX:{
                type: Number,
                default: 0
            },
            barSvgHeight:{
                type: Number,
                default: 30
            },
            barSvgWidth:{
                type: String,
                default: '100%'
            },

        },
        data(){
            return {
                barList:[
                { id: 0, barHeight:6 },
                { id: 1, barHeight:25 },
                { id: 2, barHeight:15 },
                { id: 3, barHeight:17 },
                { id: 4, barHeight:29 },
                { id: 5, barHeight:21 },
                { id: 6, barHeight:18 },
                { id: 7, barHeight:5 },
                { id: 8, barHeight:18 },
                { id: 9, barHeight:8 },
                { id: 10, barHeight:16 },
            ]
            }
            
        }
    }
</script>